<template>

    <a-list
            class="comment-list"
            :header="`共有${commentList.length} 个评论`"
            item-layout="horizontal"
            :data-source="commentList"
    >
        <a-list-item slot="renderItem" slot-scope="item">
            <a-comment :author="item.user.nickname" :avatar="item.wechatAvatar?item.wechatAvatar:'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbc1I7XoEOWf2vwOoQtA9jew3n5UicErMB6iaVDYgRFTlMj9Chex2jeUmSiaoVJibXtKhXJ83RbHh83w/132'">
                <template slot="actions">

                    <span class="replay">回复</span>
                    <span class="time">{{item.createdTime}}</span>
                </template>

                <p slot="content">

                    <a-rate :default-value="item.score" disabled  class="rate"/>
                    {{ item.commentContent }}
                </p>
<!--                <a-tooltip slot="datetime" :title="item.createdTime.format('YYYY-MM-DD HH:mm:ss')">-->
<!--                    <span>{{ item.createdTime.fromNow() }}</span>-->
<!--                </a-tooltip>-->
            </a-comment>
        </a-list-item>

    </a-list>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                data: [
                    {
                        actions: ['Reply to'],
                        author: 'Han Solo',
                        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                        content:
                            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                        datetime: moment().subtract(1, 'days'),
                    },
                    {
                        actions: ['Reply to'],
                        author: 'Han Solo',
                        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                        content:
                            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                        datetime: moment().subtract(2, 'days'),
                    },
                ],
                moment,

            };
        },
        props:{
            commentList:{
                type:Array
            }
        },
        created() {
            this.user=this.$refs.user
            this.data=this.commentList

        }
    };
</script>
<style lang="less" scoped>
    /deep/.ant-comment{
        width: 100%;
    }
    /deep/.ant-comment-actions>li{
        float: right;
    }
    .replay{
        font-size: 14px;
    }
    .time{
        font-size: 13px;
        color: #999;
    }
    /deep/.time:hover{
        font-size: 13px;
        color: #999;
    }
    .replay:hover{
        color: #00cf8c;
    }
    .rate{
        float: right;
    }
</style>
